<template>
  <div>
    <div class="warpper">
      <div @click="exportData" class="import">导出数据到Excel</div>
      <div class="c-1-2">
        <!-- <div class="btn" @click="reset">重置</div>
        <div class="btn" @click="serch">查询</div> -->
        <el-button type="primary" @click="reset">重置</el-button>
        <el-button type="primary" @click="serch">查询</el-button>
      </div>
    </div>

    <my-table :th="th">
      <template v-for="(tritem, idx) in data">
        <tr :key="idx">
          <td>{{ tritem.order_number }}</td>
          <td>{{ tritem.name }}</td>
          <td>{{ tritem.company }}</td>
          <td>{{ dayjs(tritem.pay_date).format("YYYY-MM-DD HH:mm:ss") }}</td>
          <td>{{ tritem.order_quantity }}</td>
          <td>{{ tritem.order_status }}</td>
          <td>{{ tritem.online }}</td>
          <td>{{ tritem.pay_method }}</td>
          <td>{{ getstate(tritem.pay_status) }}</td>
          <td @click="show(tritem)" class="see">查看订单</td>
        </tr>
      </template>
    </my-table>
  </div>
</template>

<script>
import { GetOrderMsg } from "../../api/bigcustomer";
import { Bus } from "../../Bus/index";
export default {
  data() {
    return {
      th: [
        "订单编号",
        "姓名",
        "单位",
        "创建时间",
        "数量(张)",
        "单价(元)",
        "金额",
        "支付方式",
        "订单状态",
        "操作",
      ],
      data: [],
      another_data: [],
      another_data_num: [],
      msg: [],
      name: "",
    };
  },
  beforeCreate() {
    //接收筛选订单信息
    Bus.$on("serchorder", (c1, c2) => {
      // console.log(c1);
      this.msg = c1;
    });
    Bus.$on("cardsmsg", (val) => {
      this.name = val[0].name;
      this.data = val;

      let num1 = 0;
      let num2 = 0;
      this.data.forEach((element) => {
        if (element.pay_status == 1) {
          element.pay_status = "已支付";
        }
        if (element.card_type == "虚拟卡") {
          num1++;
        }
        if (element.card_type == "实体卡") {
          num2++;
        }
        element.pay_date = this.dayjs(element.pay_date).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
      Bus.$emit("virtualnum", num1, num2);
    });
    //获取虚拟卡订单信息
    GetOrderMsg({}).then((res) => {
      //虚拟卡 实体卡 分类
      let card1 = [];
      let card2 = [];
      // this.data = res.data;
      // this.another_data_num = res.data;

      this.data.forEach((el, idx) => {
        if (el.card_type == "虚拟卡") {
          card1.push(el);
        }
        if (el.card_type == "实体卡") {
          card2.push(el);
        }
        if (idx == this.data.length - 1) {
          // this.data = card1;
          this.another_data = card1;
          Bus.$emit("physicalcard", card2);
        }
      });
    });
  },
  watch: {},
  methods: {
    getstate(state) {
      if ((state = "1")) {
        return (state = "已支付");
      }
    },
    show(item) {
      console.log(item);
      this.$store.commit("changeOrder", item);
      Bus.$emit("ordermmsg", item);
      // this.$store.commit("msg", item);
    },
    reset() {
      this.data = this.another_data;
    },
    serch() {
      if (this.msg.length == 0) return;
      this.data = this.msg;
      this.$emit("resetzero", "");
    },
    //触发按钮点击下载事件
    exportData() {
      this.excelData = this.data; //将你要导出的数组数据（historyList）赋值给excelDate
      this.export2Excel(); //调用export2Excel函数，填写表头（clomns里的type）和对应字段(historyList里的属性名)
    },
    //表格数据写入excel
    export2Excel() {
      var that = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/excel/export2Excel");
        //这里使用绝对路径( @表示src文件夹 )，使用@/+存放export2Excel的路径【也可以写成相对于你当前"xxx.vue"文件的相对路径，例如我的页面放在assets文件夹同级下的views文件夹下的“home.vue”里，那这里路径也可以写成"../assets/excel/Export2Excel"】
        const tHeader = [
          "订单编号",
          "姓名",
          "单位",
          "创建时间",
          "数量(张)",
          "单价(元)",
          "金额",
          "支付方式",
          "订单状态",
        ]; // 导出的excel表头名信息
        const filterVal = [
          "order_number",
          "name",
          "company",
          "pay_date",
          "order_quantity",
          "order_status",
          "online",
          "pay_method",
          "pay_status",
        ]; // 导出的excel表头字段名，需要导出表格字段名
        const list = that.excelData;
        const data = that.formatJson(filterVal, list);

        export_json_to_excel(tHeader, data, "虚拟卡订单"); // 导出的表格名称，根据需要自己命名
      });
    },
    //格式转换，直接复制即可,不需要修改什么
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>

<style scoped lang='less'>
.warpper {
  display: flex;
  justify-content: space-between;
}
.import {
  width: 150px;
  height: 30px;
  line-height: 30px;
  background-color: #0076d7;
  color: #bee4e4;
  border-radius: 2px;
  margin: 10px 0;
  cursor: pointer;
}

.see {
  cursor: pointer;
  color: #4eabf4;
}

.c-1-2 {
  width: 150px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn {
    padding: 0 10px;
    width: 50px;
    height: 25px;
    border: 1px solid #ccc;
    cursor: pointer;
  }
}
</style>